import React, { Component } from 'react';
import { MemoryRouter as Router, Route, Link } from 'react-router-dom'
import Types from 'prop-types';

import { Button, InputItem, WhiteSpace, WingBlank } from 'antd-mobile'

import 'antd-mobile/dist/antd-mobile.min.css'
import './App.less'

function validation(entity) {
    entity.prototype.validate = function (name) {
        if (this.state[name].length < 5) {
            console.error(name + '不能小于5');
        }
    }
}

function validation2(length) {
    return function (entity) {
        entity.prototype.validate = function (name) {
            if (this.state[name].length < length) {
                console.error(name + '不能小于' + length);
            }
        }
    }
}

function validation3(obj, arr) {
    return function (entity) {
        entity.prototype.validate = function (name) {
            if (this.state[name].length < obj[name]) {
                console.error(name + '不能小于' + obj[name]);
            }
        }

        entity.prototype.init = function () {
            Object.keys(obj).forEach((i, idx) => this.state[i] = arr[idx])
        }
    }
}

@validation3({username: 8, pwd: 6}, ['haha', '123'])
class Home extends Component {
    state = {
        username: '',
        pwd: ''
    }

    constructor() {
        super();
        this.init();
    }

    InputChangeHandler(name, value) {
        this.setState({ [name]: value });
    }

    render() {
        const { username, pwd } = this.state;

        return (
            <div>
                <InputItem value={username} onChange={this.InputChangeHandler.bind(this, 'username')}>账号</InputItem>
                <InputItem value={pwd} onChange={this.InputChangeHandler.bind(this, 'pwd')} type="password">密码</InputItem>
                <WhiteSpace size="lg"></WhiteSpace>
                <WingBlank>
                    <Button type="primary" onClick={() => {
                        this.validate('username')
                        this.validate('pwd')
                    }}>注册</Button>
                </WingBlank>
                
            </div>
        )
    }
}

export class App extends Component{
    render() {
        return (
            <Router>
                <Route path="/" exact component={Home} />
            </Router>
        )
    }
}